<template>
  <div class="page_root">
    <div class="section">
      <div v-show="pageReady" class="card">
        <div class="new_card">
          <div class="list">
            <div v-if="!allList.length" class="empty">没有更多了</div>
            <div
              v-for="item in allList"
              :key="item.hash"
              class="item"
              :title="item.name"
            >
              <NuxtLink :to="`/blog/${item.hash}`" target="_self" class="link">
                {{ item.name }}
              </NuxtLink>
              <div class="time">{{ formatDate(item.created_at) }}</div>
            </div>
          </div>
        </div>

        <div class="pagination">
          <div class="total">
            共{{ Math.ceil(folderBlogList.total / pager.pageSize) }}页/{{
              folderBlogList.total
            }}篇 当前第{{ pager.pageNo }}页
          </div>
          <div v-if="pager.pageNo > 1" class="prev_page">
            <nuxt-link :to="{ name: 'blog', query: { p: pager.pageNo - 1 } }">
              上一页
            </nuxt-link>
          </div>
          <div
            v-if="
              pager.pageNo < Math.ceil(folderBlogList.total / pager.pageSize)
            "
            class="next_page"
          >
            <nuxt-link :to="{ name: 'blog', query: { p: pager.pageNo + 1 } }">
              下一页
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import qs from 'qs'
import http from '~/utils/http'

async function getList(params) {
  try {
    const res = await http.get('/blog?' + qs.stringify(params))
    if (res.code === 200) {
      return {
        allList: res.data.list,
        folderBlogList: {
          list: res.data.list,
          total: res.data.total,
        },
        pageReady: 1,
      }
    }
  } catch (e) {
    console.log(e)
    return {}
  }
}
export default {
  async asyncData({ query }) {
    const pager = {
      pageNo: query.p * 1 || 1,
      pageSize: query.n || 20,
    }
    const data = await getList(pager)
    return { ...data, pager }
  },
  data() {
    return {
      pageReady: 0,
      allList: [],
      folderBlogList: [],
      pager: {
        pageNo: 1,
        pageSize: 20,
      },
      filter: {
        keywords: '',
      },
      searchResultList: {
        list: [],
        total: 0,
        msg: '',
      },
      currentFolderType: 1,
    }
  },
  head() {
    return {
      title:
        `二师兄笔迹-` +
        (this.pager.pageNo === 1 ? '首页' : `第${this.pager.pageNo}页`),
      meta: [
        {
          name: 'keywords',
          content: `二师兄笔迹,前端,大前端,JavaScript,HTML,CSS,Java,Python,Flutter,blog`,
        },
        {
          name: 'description',
          content: `二师兄笔迹,前端,大前端,JavaScript,HTML,CSS,Java,Python,Flutter,blog`,
        },
        {
          name: 'baidu-site-verification',
          content: 'code-DDxANKGNU6',
        },
      ],
    }
  },
  watch: {
    async $route() {
      this.pager = {
        pageNo: this.$route.query.p * 1 || 1,
        pageSize: this.$route.query.n || 20,
      }
      const res = await getList(this.pager)
      this.allList = res.allList || []
      this.folderBlogList = res.folderBlogList
      this.pageReady = res.pageReady
    },
  },
  mounted() {
    // this.init()
  },
  methods: {
    formatDate(v) {
      return moment(v).format('YYYY-MM-DD HH:mm:ss')
    },
    async init() {
      try {
        const res = await this.$axios.$get('/blog?' + qs.stringify(this.pager))
        if (res.code === 200) {
          this.allList = res.data.list
          this.folderBlogList = {
            list: res.data.list,
            total: res.data.total,
          }
        }
        this.pageReady = 1
      } catch (e) {
        console.log(e)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.page_root {
  .list {
    .item {
      padding: 6px 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      transition: all 0.2s linear;
      > div {
        margin: 4px 0;
      }
      .link {
        display: block;
        max-width: 100%;
        flex-shrink: 0;
        // flex-grow: 1;
        // white-space: nowrap;
        overflow: hidden;
        // text-overflow: ellipsis;
        // margin-right: 100px;
        padding-right: 20px;
      }
      .time {
        flex-shrink: 0;
        font-size: 14px;
        color: lighten($color-text, 20%);
      }
    }
  }
  .section {
    padding: 10px;
    .search_card {
      transition: all 1s linear;

      .msg {
        padding: 10px;
        color: lighten($color-border, 16%);
      }
      .list {
        padding: 10px;
      }
    }
    .pagination {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      .next_page,
      .prev_page {
        margin: 0 10px;
        cursor: pointer;
      }
    }
  }
}

.list_title {
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 4px solid $color-border;
  padding-bottom: 10px;
}
.empty {
  padding: 50px 0;
}
</style>
